<template>
  <div>
    <el-card
      v-loading="config.loading"
      shadow="always"
      :body-style="{ padding: '20px' }"
      class="max-view-height"
    >
      <el-dropdown
        style="position: absolute; right: 50px; z-index: 1000"
        @command="handleCommand"
      >
        <el-button plain size="small">
          {{ version.text }}<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="item in versionOption"
            :key="item.version"
            :command="item"
            >{{ item.text }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
      <el-tabs v-model="action.activeName">
        <el-tab-pane
          v-for="item in panes"
          :key="item.key"
          :label="item.label"
          :name="item.key"
        >
        </el-tab-pane>
      </el-tabs>
      <div v-if="action.activeName === '0'" class="table-container">
        <my-table :height="tableMaxHeight" :data="tableData">
          <el-table-column
            prop="orgPost_title"
            label="岗位"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="orgPostDetail_title"
            label="岗位明细"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="orgPostUserWorkSum_file"
            label="打分文件"
            show-overflow-tooltip
            align="center"
          >
            <template v-slot="{ row }">
              <file
                v-if="
                  row.orgPostUserWorkSum_file && row.orgPostUserWorkSum_fileName
                "
                :file="row.orgPostUserWorkSum_file"
                :file-name="row.orgPostUserWorkSum_fileName"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="orgPostUserWorkSum_addTime"
            label="文件上传时间"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="score"
            label="分数"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="addTime"
            label="打分时间"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
        </my-table>
        <abstract-pagination
          :model="searchForm"
          @current-change="pageChange"
          @size-change="pageSizeChange"
        ></abstract-pagination>
      </div>
      <template v-if="action.activeName === '1'">
        <have-been-scored :data="scoredWorkSummaryData"></have-been-scored>
      </template>
    </el-card>
  </div>
</template>

<script>
import tableMixin from '@/mixin/tablePageMixin'
import autoAdaptHeightMixin from '@/views/_common/ListPage/autoAdaptHeightMixin'
import HaveBeenScored from './components/HaveBeenScored.vue'
import MyTable from '@/components/MyTable'
import AbstractPagination from '@/components/abstract/Pagination'
import File from '@/components/File'
import { request } from '@/api/request'

export default {
  name: 'ScoreRecord',

  components: {
    // ListPage,
    HaveBeenScored,
    MyTable,
    AbstractPagination,
    File
  },

  mixins: [tableMixin, autoAdaptHeightMixin],

  data() {
    return {
      scoredWorkSummaryData: [],
      panes: [
        {
          key: '0',
          label: '组织架构岗位用户打分'
        },
        {
          key: '1',
          label: '已打分的工作小结'
        }
      ],
      version: {
        id: null,
        version: null,
        text: '全部版本'
      },
      versionOption: [],
      action: {
        activeName: '0'
      },
      tableData: []
    }
  },

  computed: {
    listPageConfig() {
      return {
        pageLoading: this.config.operating,
        dataLoading: this.config.loading,
        buttons: [],
        table: {
          props: { data: this.tableData },
          on: { 'row-click': this.rowClick }
        },
        pagination: {
          props: { model: this.searchForm },
          on: {
            'current-change': this.pageChange,
            'size-change': this.pageSizeChange
          }
        }
      }
    }
  },

  methods: {
    pageChange(v) {
      this.searchForm.page = v
      this.getIndexData()
    },

    pageSizeChange(v) {
      this.searchForm.page = 1
      this.searchForm.pageSize = v
      this.getIndexData()
    },

    handleCommand(command) {
      this.version = {
        id: command.id,
        version: command.version,
        text: command.text
      }
      this.getIndexData()
    },

    getIndexData(isLoading = true) {
      isLoading && (this.config.loading = true)
      return request(
        'personal/myScoringRecord/index',
        {
          p: this.searchForm.page,
          limit: this.searchForm.pageSize,
          version: this.version.version
        },
        (res) => {
          this.searchForm.total = res.data.count
          this.tableData = res.data._list
        },
        {
          isDelNull: true
        }
      ).finally(() => {
        isLoading && (this.config.loading = false)
      })
    },

    getVersionFilter() {
      return request('index/index/commonOrgVersionFilter', {}, (res) => {
        res.data.forEach((e) => (e.text = e.version))
        this.versionOption = res.data
        this.versionOption.unshift({
          id: null,
          version: null,
          text: '全部版本'
        })
      })
    },

    getScoredWorkSummary() {
      return request(
        'personal/myScoringRecord/scoredWorkSummary',
        {},
        (res) => {
          this.scoredWorkSummaryData = res.data || []
        }
      )
    },

    search() {
      if (this.config.loading) return
      this.config.loading = true
      Promise.all([
        this.getIndexData(false),
        this.getVersionFilter(),
        this.getScoredWorkSummary()
      ]).finally(() => {
        this.config.loading = false
      })
    }
  }
}
</script>
